<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<!-- 本作业由闻程飞辅导完成，所以和他的代码一毛一样 -->
<body>
	<div id="app">
		<button @click="num++">+</button>{{num}}
		<he-button :num="num" @dian="shuzi">
			<template v-slot:header="{a}">
			    <span>个雷鑫,{{a}}</span>
            </template>
		</he-button>
	</div>
</body>
<script src="./vue.js"></script>
<script>
	const {createApp,ref,computed}=Vue;
	    const app = createApp({
			setup(){
				let num = ref(0)

				function shuzi(v){
					num.value=v
				}
				return{
					num,
					shuzi
				}
			}
		})

		app.component('he-button',{
			props:['num'],
			setup(props,{emit}){
                let num = computed(function(){
					return props.num
				})
				function jian(){
					emit('dian',num.value-1)
				}
				function jia(){
					emit('dian',num.value+1)
				}
				return{
					num,
					jia,
					jian
				}
			},
			template:`<div>
				<button @click="jian">-</button>
				<span>{{num}}<slot name="header" a="雷鑫真捞"/></span>
				<button @click="jia">+</button>
				</div>`
		})

		app.mount('#app')
</script>
</html>